<template>
    <div>
        <Button type="success" @click="modal.officeFlag = true" icon="md-arrow-round-down">office导入</Button>
        <Table style="margin: 10px 0 10px" ref="selection"  :loading="loading" border :columns="tableColums"
               :data="subList"
               :indent-size=140>
            <template slot-scope="{ row }" slot="action">
         <!--       <Button icon="md-build" type="primary" size="small"
                        @click="" style="margin-right: 5px">编辑
                </Button>-->
                <Button icon="ios-eye" type="warning" size="small"
                        @click="modal.subDetailsFlag = true,modal.subId = row.subId" style="margin-right: 5px">详情
                </Button>
                <Poptip confirm transfer title="是否删除?" @on-ok="deleteSubject(row.subId)" @on-cancel="$Message.info('点击了取消')">
                    <Button type="error" icon="md-trash" style="margin-right: 5px" size="small">删除</Button>
                </Poptip>
            </template>
        </Table>
        <Page :total="total" @on-change="changePage" @on-page-size-change="changePageSize" show-total show-sizer
              show-elevator/>
        <office-import :modal=modal></office-import>
        <sub-detail :modal=modal></sub-detail>
    </div>
</template>

<script>
    import officeImport from "@c/questionBank/officeImport"
    import subDetail from "@c/questionBank/subDetail"
    export default {
        components: {officeImport,subDetail},
        data() {
            return {
                modal: {
                    officeFlag: false,
                    subDetailsFlag:false,
                    subId:null
                },
                total: 0,
                map: {
                    page: 1,
                    size: 10,
                },
                loading: false,
                tableColums: [{type: 'selection', width: 60, align: 'center'},
                    {type: 'index', title: "序号", width: 70, align: 'center'},
                    {title: "题目", ellipsis: true, tooltip: true, key: "subTitle", align: 'center', sortable: true},
                    {
                        title: "类型", render: (h, param) => {
                            return <label>{param.row.subType}</label>
                        }, align: 'center', sortable: true
                    },
                    {title: "答案", ellipsis: true, tooltip: true, key: "subAnswer", align: 'center', sortable: true},
                    {
                        title: "解析",
                        ellipsis: true,
                        tooltip: true,
                        key: "subAnsweranalysis",
                        align: 'center',
                        sortable: true
                    },
                    {title: '操作', slot: 'action', width: 180, align: 'center'}],
                subList: []
            }
        },
        methods: {
            /**
             * 获取全部的题目信息
             */
            getAllSubject() {
                this.loading = true
                this.map.startPage = (this.map.page - 1) * this.map.size
                this.http.post("/qB/getAllSubject", this.qs.parse(this.map)).then(res => {
                    this.subList = res.data.list
                    this.total = res.data.total
                    this.loading = false
                })
            },
            /**
             * 改变页数
             * @param val
             */
            changePage(val) {
                this.map.page = val
                this.getAllSubject()
            },
            /**
             * 改变页码
             * @param val
             */
            changePageSize(val) {
                this.map.size = val
                if (this.map.page == 1) {
                    this.getAllSubject()
                }
            },
            /**
             * 删除题目信息通过id
             * @param subId
             */
            deleteSubject(subId){
                this.http.delete(`/qB/deleteSubjectById/${subId}`).then(res=>{
                    if(res.data){
                        this.getAllSubject()
                        this.$Message.success("删除成功")
                    }
                })
            }
        },
        created() {
            this.getAllSubject()
        }
    }
</script>

<style scoped>

</style>
